<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- 
영역을 지정하는 태그
<span>
<div> = <br><span><br>
<p> = <br><br><span><br><br>
 -->
 <script type="text/javascript">
 function findNode() {
	var in_1_3 = document.getElementById("in_1_3");
	var parent = in_1_3.parentNode;
	parent.style.border="1px dashed pink"; //in_1_3의 부모노드의 겉에 경계선을 핑크색으로 style줌
	var firstChild = in_1_3.firstChild;
	firstChild.nextSibling.style.backgroundColor="skyblue";
	var lastChild = in_1_3.lastChild;
	lastChild.previousSibling.style.backgroundColor="pink";
	lastChild.previousSibling.style.border="2px solid gray";
	
	var in_2_2=document.getElementById("in_2_2");
	var children = in_2_2.children;//자식 Element 노드들 (NodeList)을 리턴
	var childNodes = in_2_2.childNodes;//자식 노드들(NodeList)을 리턴
	alert(children.length+"-"+childNodes.length);
 
 }
 </script>
<div id = "root_layer">
	<div id="in_1_1">in_1_1</div>
	<div id="in_1_2">in_1_2</div>
	<div id="in_1_3">
		<p id="in_2_1">in_2_1</p>
		<div id="in_2_2">
			<span id ="in_3_1">in_3_1</span>
			<span id ="in_3_2">in_3_2</span>
			<a href="abc.jsp" id="in_3_3">a.jsp (in_3_3)</a>
		</div>		
	</div>
</div>
<input type="button" value="클릭" onclick="findNode()">
</body>
</html>